<script>
import {
  addCourseHistory,
  getCourseDetail,
  getHistoryByCourseId
} from 'api/course'

export default {
  name: 'Detail',
  data() {
    return {
      detail: {},
      currentVideo: {}
    }
  },
  created() {
    this.getDetail()
  },
  beforeDestroy() {
    this.recordHistory()
  },
  methods: {
    async getDetail() {
      if (!this.$route.query.id) return
      const res = await getCourseDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
        this.getHistory()
      }
    },
    async getHistory() {
      if (!this.$route.query.id) return
      const res = await getHistoryByCourseId({
        courseId: this.$route.query.id
      })
      if (res.code === 200) {
        if (res.data) {
          const data = {
            id: Number(res.data.section_id),
            url: res.data.section_url,
            title: res.data.section_title
          }
          this.currentVideo = data
          this.$refs.videoRef.currentTime = res.data.duration
          this.$message('已为您自动播放上次观看的视频')
          this.$nextTick(() => {
            this.$refs.videoRef.play()
          })
        } else {
          this.currentVideo = this.detail.section[0]
          this.$nextTick(() => {
            this.$refs.videoRef.play()
          })
        }
      }
    },
    onClickPlayNextVideo(item) {
      this.currentVideo = item
    },
    async recordHistory() {
      const history = {
        courseId: this.detail.id,
        sectionId: this.currentVideo.id,
        duration: this.$refs.videoRef.currentTime
      }
      const res = await addCourseHistory(history)
    }
  }
}
</script>

<template>
  <div class="container">
    <div class="content flex items-start">
      <div class="video-box relative flex-1 border-l-2 border border-gray-100">
        <h3 class="current-title absolute top-0 left-0">
          {{ currentVideo.title }}
        </h3>
        <div class="video">
          <video
            ref="videoRef"
            class="video"
            height="500px"
            :autoplay="false"
            controls
            :src="currentVideo.url"
          />
        </div>
      </div>
      <div class="sections">
        <div class="section-title">
          <span class="title">课程目录</span>
        </div>
        <div
          v-for="(item, index) in detail.section"
          :class="{
            'section-left': index % 2 === 0,
            'section-right': index % 2 === 1,
            'category-is-active': currentVideo.id === item.id,
          }"
          class="section mb-2"
          @click="onClickPlayNextVideo(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="info">
      <h2 class="title">{{ detail.title }}</h2>
      <div>
        <span v-html="detail.introduce" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.category-is-active {
  color: var(--el-color-primary);
}
.container {
  width: 1000px;
  background-color: #fff;
  margin: 0 auto;
  .content {
    .video-box {
      .current-title {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 1em;
        font-weight: bold;
        padding: 10px 0;
        padding-left: 10px;
        color: #fff;
        border-radius: 10px;
      }
      .video {
        width: 100%;
        height: 500px;
        object-fit: cover;
      }
    }
    .sections {
      width: 300px;
      margin-top: 10px;
      padding: 0 5px;
      .section-title {
        font-size: 1.1em;
        margin-bottom: 10px;
      }
      .section {
        width: 48%;
        padding: 10px 0;
        background-color: #f7f7f7;
        border-radius: 5px;
        text-align: left;
        display: inline-flex;
        justify-content: center;
      }
      .section-left {
        margin-right: 2%;
      }
      .section-right {
        margin-left: 2%;
      }
    }
  }
}
.info {
  padding: 10px;
  .title {
    font-size: 2em;
    font-weight: bold;
  }
}
</style>
